<script>
</script>
<template>
  <div class="alvin-card">
    <slot name="header">
      <div class="header">
        <div class="title">{{title}}</div>
        <div class="operation">
          <slot name="operation"></slot>
        </div>
      </div>
    </slot>
    <slot>
      内容
    </slot>
  </div>
</template>
<script setup lang="ts">
import { defineProps } from "vue"

defineProps({
  title: {
    type: String,
    required: true,
  }
})
</script>
<style lang="less">
.alvin-card {
  padding: 26px 24px;
  background:#fff;
  border-radius:4px;
  .header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    .title{
      font-size:18px;
      color:#333;
      font-weight:700;
    }
    .operation{
      button{
        margin-right:12px;
      }
    }
  }
}
</style>
